4: Design Palette

Table of main palette entries, highlighting any special behaviour associated with each control.

Control	Description and Notes
Text Box	This is the editable single line text box.
Display Only Output	This is a display-only text box.
Button	A standard button that can trigger events.
Hyperlink	Standard HMTL Hyperlink, with the ability to set events upon click, using the Events tab.
Radio	Allows users to select one option from a series of choices. These options can be a fixed set of values (static) defined in the Properties Data Constraints section, or dynamically defined based on underlying data. If the option is dynamic, then a data binding needs to be set-up to identify where the values will come from within the underlying data. Please refer to the Bindings section for more details.
Select Box	Allows users to select a single value from a drop-down list of values. The list of values can be static or dynamic, similar to that described against the Radio control above.
Multi-Select Box	Similar to the Select Box, but allows users to select more than one value from the drop-down list.
Filtering Select Box	Select box that filters a list of values by matching characters as they are typed.
Autocomplete List	Allows multiple values to be selected from a filtered list of values. The selected items are displayed as tagged entries, similar to a list of recipients in an e-mail program. The items can be filtered and selected by typing or clicking within the control. Selected items can be removed by clicking the x within each selected value.
Checkbox	Allows users to select a single value using a checkbox. It is possible to state the default value, checked value and unchecked value.
Toggle	This is similar to the Checkbox, but provides a sliding switch that can be used to indicate whether the value is checked or not.
Multi-Checkbox	Allows users to select more than one checkbox.
Date	Captures input in a date/time format. By default, this provides a calendar picker. Various parameters can be altered in the Data Constraints and Value Conversions sections. For example, the display options can be changed for the calendar to be more appropriate for birth dates, e.g. Calendar Type - Year and Month selection drop-downs.
Currency	A control designed for input and formatting of currency values. When users click on the field it displays the numeric part of the currency. When they click off the field it will format the data based on the locale of the Browser and apply a currency code if defined in the Custom Attributes section.
Number	A text box configured for number values. When users click on the field it displays the number value. When they click off the field it will format based on the locale of the Browser.
Number Spinner	A text box for number values with up and down arrows to change the values. Note: This will not render completely on the Page View because it relies on JavaScript.
Text Area	Allows a user to enter several lines of text in a multi-line text box.
Rich Text Editor	This allows users to enter multiple lines of text, and provides WYSIWYG editing capabilities for setting fonts, colours etc.
Paragraph	Displays an output only rich text field, allowing for formatting of a series of sentences or bullet points.
Password	Allows entry of masked passwords. Entered values are captured as dots.
Image	Embeds an image file (bmp, jpg, gif, etc.), frequently used for logos or graphics. Images can be selected from the local repository, or uploaded from another location. The image displayed can also be dynamically defined via bindings. Please refer to the WebMaker Forum entry How to dynamically change an image/icon displayed for a value e.g. a Status for more detailed configuration options.
HTML Hidden Field	Commonly used for holding and exchanging non-display values with Servers. These fields are only shown on the Page View when Design Mode is switched on.
File Upload	Can be used to upload files to Servers. See the File Upload Control section for more details.
Custom HTML	Allows users to enter XML-compliant HTML.

Layout Groups usually act as containers for other controls. They can be used for controlling the Alignment, Sizing and positioning of their contents. Table of Layout Groups:

Control	Description and Notes
Layout Group	The Layout Group is one of the main containers for aligning, sizing and positioning collections of controls. Layout groups can be nested and used to organise and orchestrate the attributes of contained controls, including hiding, showing, disabling, positioning, etc.
Layout Grid	A container of cells, each of which can be used to contain other controls, including layout groups. The grid can be expanded, including the ability to merge and split cells.
Spacer	Allows space to be inserted vertically or horizontally, to enable fine-tuning of control layouts. The size of the spacers can be adjusted by dragging the edges in the required direction.
One Column	Provides a single column grid, acting as a container for other controls.
Two Columns	Provides a two column grid, acting as containers of equal width for other controls.
Partial Page Container (Requires Server Controllers)	Acts as a container for content returned by AJAX submissions.
Repeat Only	Acts as a general-purpose container for managing the display of repeating information, including other layout groups. For example, a Repeat Only container can contain a group that contains an address. The Repeat Only container can then reference the repeating data that contains all addresses to display a list of repeating addresses, with each address contained in its own group.
Ordered List	Creates the HTML <ol> and <li> tags as the containers for the elements which are dropped into this type of layout group.
Unordered List	Creates the HTML <ul> and <li> tags as the containers for the elements which are dropped into this type of layout group.

Visual Groups act as containers for other controls. They are similar to the layout groups, but provide some visual characteristics. The tab control is a good example because it has visible tabs that are used to organise other controls. Table of Visual Groups:

Control	Description and Notes
Bordered Group	This is similar to the Layout Group, but provides a visible border and/or background for its contents.
HTML Fieldset	This uses the HTML Fieldset control.
Tabs	By default, the tab control contains two tabs. The + symbol to the right of the existing tabs can be used to add additional tabs. Tabs can be dragged and reordered or deleted by using the right-click context menu. Tabs are controlled by a Tab Control Field. The properties for this field can be accessed by clicking on the background, to the right of the + symbol.
Collapsible Content	Can be used to hide or reveal a group of controls. The Control Styling - Class Name of the show_hide_details field should be set to toggleHidden or toggleVisible, depending on the visibility required when the page is loaded. The default is toggleHidden, which hides the collapsible_content group, and shows the collapsed_content group. The collapsible_content group should contain the controls that need to be hidden or revealed. The collapsed_content group enables some summary data to be shown if the group is hidden. If the summary is not required when collapsed, the collapsed_content group can be removed. The Custom Attributes can be used to change the label prefixes that are appended to the Anchors Caption. The default is Show and Hide.
Popup Dialogue	Popup Dialogues are initially hidden after load. To enable them (popup), an event such as onclick needs to be defined against a suitable trigger control such as a Button or Hyperlink. The Toggle Group Visibility action needs to be used as a result of the event and the group to be made visible should be the popup dialogue container group.
Resizeable Panel	Creates a panel with resizable columns. The relative sizes of the columns can be altered by dragging the central divider.
Horizontal Line	Renders a horizontal line across the container within which it is placed.

Composite Controls typically contain a collection of other controls and scripts to provide a richer user experience. Table of Composite Controls

Control	Description and Notes
Accordion	Accordions provide multiple panes, each of which can act as containers for other controls. Only one pane is visible at any one time. The titles for the Panes can be changed within the Custom Attributes section of the Properties tab. The rendering of this control requires a full preview. The Page view will only display the group boundaries for the panes in design mode.
Editable Table	A table control that allows insertion, modification and deletion of rows. Please see the Editable Table Control section for more details.
Paging Table	Provides a navigation control to enable the information in the table to be browsed a page at a time, with the ability to move backwards and forwards. Also allows sorting of information. Please see the Paging Table Control section for more details.
Data Cards	Provides a 'card' of information for each record in a repeating data set. Please see the Data Cards Control section for more details.
Chart	The charting control allows various charts to be displayed for a repeating table of data. The repeating table of data must be in the HTML, but it does not necessarily need to be displayed to the user. Charts available are: 'bar', 'area', 'pie', 'line'. Depending on the data, it may be necessary to change the axis of the data in the 'chart' custom field. You can adjust the title of the chart by using the label of the group contained within the chart data table. At the bottom of the control there is a chart_init custom field that contains a script fragment that controls some of the settings for the Chart control. It is important that this is not moved or deleted, otherwise the control will not work correctly. There are FAQ entries on the WebMaker Forum that explore different user scenarios and how to use the control. The group called ChartDisplayGroup contains the rendered chart. This can be moved if needed to position the chart separately to the data table.
Map	This control can display a Google map and display a pin for an address value if supplied (requires Google API key). The control adds Page Events to load the map initially and plots a pin based on an address value. You can change the binding for the address field to map to some other data if required. There is also a button to reposition the map and plot the pin if the address is changed and the button processed.
Number Slider	The number slider provides a graphical scale for the selection of numbers by using a draggable arrow to indicate the selected number. The control contains a number of nested groups, used for different visual capabilities such as the presentation of rulers. The groups can be removed if they are not required, or altered to change their presentation. The main slider_number field is controlled by various Custom Attributes within the Properties tab. The control has additional notes within the Description field.
Tree	Provides a tree view of information contained in an XML data structure. This structure can be defined within the Bindings tab. An item can be selected and used to make further decisions on its contents.
List Builder	Provides two lists with the ability to move items between them. The left hand side contains the list of all selectable items. The right hand side contains the selected items and can be ordered as required. Field fullList should be bound to list all selectable items and hidden field currentOptions contains the selected items.
Menu	Provides a menu bar control providing a number of options that can be selected. Please see the Menu Control section for more details.

Table of Print Controls

Control	Description and Notes
Print this Web Page Link	This adds a Printer icon on the page which will only be shown on the screen. When the icon is clicked, it will display a print window or print preview window depending on your Browser settings.
Page Break Group	Inserts a page break to force content onto the next physical sheet of paper during printing.